<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="p-10">
		<h3>Javascript 基础</h3>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>for of, for in, forEach 比较</h3>
					<ul class="plist">
						<li>for of 用于迭代Array, 迭代项为数组元素</li>
						<li>for in 用于迭代Object, 迭代项为属性名</li>
						<li>由于Array 是特殊的 Object, 故 for in 可迭代 Object 与 Array, for of 只可迭代Array。</li>
						<li>for in 迭代数组时, 迭代项为数组下标, 即等同于Object的属性名</li>
						<li>forEach 用于迭代 Array, 属于数组的方法。for of, for in 是语法。</li>
					</ul>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>Object</h3>
					<button onclick="testO01()">Object.keys</button>
					<button onclick="testO02()">for in Object</button>
				</section>
				<section>
					<h3>Array</h3>
					<button onclick="testA01()">先slice为数组后forEach</button>
					<button onclick="testA02()">直接forEach</button>
					<p />
					<button onclick="testA03()">for of Array</button>
					<button onclick="testA04()">for in Array</button>
					<button onclick="testA05()">Array.forEach</button>
				</section>
				<section>
					<h3>字符串</h3>
					<button onclick="testS01()">for of 字符串</button>
					<button onclick="testS02()">模板字符串</button>
				</section>
				<section>
					<h3>函数</h3>
					<button onclick="testF01()">call</button>
					<button onclick="testF02()">apply</button>
					<button onclick="testF03()">bind</button>
				</section>
			</div>
			<div class="col-1">
				<ul id="log"></ul>
			</div>
		</div>

		<script type="text/javascript">
			function clearLog() {
				$("#log").empty();
			}

			function appendLog(text) {
				$("<li></li>").text(text).appendTo($("#log"));
			}

			function initLog(text) {
				clearLog();
				appendLog("=====  " + text + "  =====");
			}

			function testO01() {
				initLog("Object.keys");
				var obj = {
					name: "Ray",
					age: 30,
					sex: 1
				};
				var keys = Object.keys(obj);
				for (var item in keys) {
					appendLog(item + " --- " + keys[item]);
				}

				appendLog("name in obj: " + ("name" in obj));
				appendLog("hasOwnProperty age: " + obj.hasOwnProperty("age"));
			}

			function testO02() {
				initLog("for (key in Object)");
				var obj = {
					name: "Ray",
					age: 30,
					sex: true
				}
				for (key in obj) {
					appendLog(`${key} = ${obj[key]}`);
				}
			}

			function testA01() {
				initLog("将类数组对象slice为数组后forEach");
				var items = document.getElementsByTagName("h3");
				var ary = Array.prototype.slice.call(items);
				ary.forEach(item => {
					appendLog("" + item.innerText);
				});
			}

			function testA02() {
				initLog("对类数组对象直接forEach");
				var items = document.getElementsByTagName("h3");
				Array.prototype.forEach.call(items, item => {
					appendLog("" + item.innerText);
				});
			}

			function testA03() {
				initLog("for (let 数组元素 of Array)");
				let foods = ["apple", "pear", "orange"];
				for (let item of foods) {
					appendLog(item);
				}
			}

			function testA04() {
				initLog("for (let 数组下标 in Array)");
				let foods = ["apple", "pear", "orange"];
				for (let index in foods) {
					appendLog(index + " : " + foods[index]);
				}
			}

			function testA05() {
				initLog("[].forEach(value, index, array)");
				let foods = ["apple", "pear", "orange"];
				foods.forEach((value, index, array) => {
					appendLog(index + " : " + value);
				});
			}

			function testS01() {
				let text = "hello";
				initLog("for of 字符串");
				for (let item of text) {
					appendLog(item);
				};
			}

			function testS02() {
				initLog("模板字符串");
				let name = "Ray";
				let age = 30;
				let text = `Name: ${name}, Age:${age}`;
				appendLog(text);
			}

			(function test11() {
				appendLog("IIFE 函数调用");
				// alert("IIFE 函数调用");
			})();
		</script>
	</body>
</html>
